<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部 -->
            <el-header style="background-color: #545c64;padding: 18px;">
                <el-icon><grid /></el-icon> 智慧城市网格化管理平台 
                <span style="float: right;"><el-icon><UserFilled /></el-icon>{{ RealName }}({{ RoleName }})
                    <el-button type="danger" @click="Logout"><el-icon><SwitchButton /></el-icon>退出</el-button>
                </span>
            </el-header>
            <!-- 左侧 -->
            <el-container>
                <el-aside width="200px">
                    <el-menu
                        active-text-color="#ffd04b"
                        background-color="#545c64"
                        class="el-menu-vertical-demo"
                        default-active="route.path"
                        text-color="#fff"
                        router
                    >
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon><Platform /></el-icon>
                                <span>基础数据</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/AdminSetting">管理员设置</el-menu-item>
                                <el-menu-item index="/GridPerson">网格人员管理</el-menu-item>
                                <el-menu-item index="/GridType">网格类型管理</el-menu-item>
                                <el-menu-item index="/Log">日志管理</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <el-sub-menu index="2"> 
                            <template #title>
                                <el-icon><Platform /></el-icon>
                                <span>网格管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/GridZero" ><el-icon><Guide /></el-icon>网格创建引导</el-menu-item>
                                <el-menu-item index="/GridOne"  ><el-icon><Expand /></el-icon>创建网格层级</el-menu-item>
                                <el-menu-item index="/GridTwo"  ><el-icon><Menu /></el-icon>创建网格</el-menu-item>
                                <el-menu-item index="/GridThree"><el-icon><User /></el-icon>创建网格队伍</el-menu-item>
                                <el-menu-item index="/GridFour" ><el-icon><Mug /></el-icon>登录系统</el-menu-item>
                                <el-menu-item index="/AreaTree" ><el-icon><Mug /></el-icon>区域数据</el-menu-item>
                                <el-menu-item index="/PhysicalGrid" ><el-icon><Mug /></el-icon>物理网格</el-menu-item>
                                <el-menu-item index="/LogicGrid" ><el-icon><Mug /></el-icon>逻辑网格</el-menu-item>
                                <el-menu-item index="/UnitGrid" ><el-icon><Mug /></el-icon>单元网格</el-menu-item>
                                <el-menu-item index="/DutyGrid" ><el-icon><Mug /></el-icon>责任网格</el-menu-item>
                                <el-menu-item index="/GridTeam" ><el-icon><Mug /></el-icon>网格队伍</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <el-sub-menu index="3"> 
                            <template #title>
                                <el-icon><Platform /></el-icon>
                                <span>网格地图管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/Map" ><el-icon><Guide /></el-icon>百度地图</el-menu-item>
                                <el-menu-item index="/SelectedMap" ><el-icon><Guide /></el-icon>下拉框定位地图</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                    </el-menu>
                </el-aside>

                <el-main>
                    <RouterView/>
                </el-main>
                </el-container>
        </el-container>
    </div>
</template>


<script  setup lang="ts">
    import { ref,onMounted } from 'vue';
    // import { useCounterStore } from '@/stores/counter';
    import { useRoute,RouterView ,useRouter} from 'vue-router';

    const route=useRoute();
    const router=useRouter();
    // const store=useCounterStore();
    import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,
    } from '@element-plus/icons-vue'

    
    const RealName=ref("");
    const RoleName=ref("");
    //生命周期钩子函数
    onMounted(()=>{
        RealName.value=localStorage.getItem("Accoun_RealName")||"";
        RoleName.value=localStorage.getItem("Role_Name")||"";
    })

    //退出登录清除数据
    const Logout=()=>{
        localStorage.removeItem("Accoun_RealName");
        localStorage.removeItem("Role_Name");
        localStorage.removeItem("token")
        router.push("/");//跳转到登录页面
    }
</script>


<!-- <style>
    .el-header {
        height: 60px;
        line-height: 60px;
        background-color: rgb(37 82 209);
        color: #fff;
    }
    .el-aside {
        min-height: calc(100vh - 60px);
        background-color: #545c64;
    }
</style> -->

